import React, { useState } from "react";
import type { MenuProps } from "antd";
import { Layout, Menu, theme } from "antd";
import routes from "../router/RouterConfig";
import { NavLink, Outlet } from "react-router-dom";
// import {
//   AppstoreOutlined,
//   MailOutlined,
//   SettingOutlined,
// } from "@ant-design/icons";
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];
function Index(this: any) {
  function getItem(
    label: React.ReactNode,
    path: string,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[]
  ): MenuItem {
    return {
      key,
      path,
      icon,
      children,
      label: <NavLink to={path}>{label}</NavLink>,
    } as MenuItem;
  }
  // 侧边导航丽娜数据渲染
  const renderRoutes = (arr: any) => {
    let items: any = [];
    arr &&
      arr.map((item: any, index: any) => {
        return items.push(getItem(item.title, item.path, index));
      });
    return items;
  };
  //顶部导航栏数据
  const items: MenuItem[] = [
    {
      label: "免费模板",
      key: "mail",
    },
    {
      label: "开通会员",
      key: "app",
      children: [
        {
          type: "group",
          label: "Item 1",
          children: [
            { label: "Option 1", key: "setting:1" },
            { label: "Option 2", key: "setting:2" },
          ],
        },
        {
          type: "group",
          label: "Item 2",
          children: [
            { label: "Option 3", key: "setting:3" },
            { label: "Option 4", key: "setting:4" },
          ],
        },
      ],
    },
    {
      label: "产品服务",
      key: "serve",
    },
    {
      label: "解决方案",
      key: "resolve",
    },
    {
      label: "内容中台",
      key: "content",
    },
    {
      label: "资源与合作",
      key: "resorce",
    },
  ];
  const [current, setCurrent] = useState("mail");
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
  };

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout>
      <Header
        style={{ display: "flex", alignItems: "center", background: "#fff" }}
      >
        <div className="demo-logo">
          <img
            src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg"
            alt="易企秀-创意营销平台"
          />
        </div>
        <Menu
          theme="light"
          mode="horizontal"
          defaultSelectedKeys={["2"]}
          selectedKeys={[current]}
          onClick={onClick}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Layout>
        <Sider
          width={230}
          style={{
            background: colorBgContainer,
            overflow: "auto",
            height: "100vh",
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={["0"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
            items={renderRoutes(routes[2].children)}
          />
        </Sider>
        <Layout style={{ padding: "0 24px 24px" }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default Index;
